<script>
import outMain from "@/components/outMain.vue";
import defUpImg from "@/components/public/defUpImg.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { otherSet, otherSetShow } from "@/http/api";

export default {
  components: { outMain, defUpImg },
  name: "",
  data() {
    return {
      formData: {
        qymc: "",
        qydz: "",
        kfnc: "",
        kfrx: "",
        qywx_url: "",
        gywm: "",
        bzzx: "",
        wxewm: "",
      },
      showCont: false,
      rules: {
        qymc: [
          {
            required: true,
            message: "请输入企业名称",
            trigger: "blur",
            min: 1,
            max: 20,
          },
        ],
        qydz: [
          {
            required: true,
            message: "请输入企业地址",
            trigger: "blur",
            min: 5,
            max: 50,
          },
        ],
        qywx_url: [
          {
            required: true,
            message: "请输入企业微信链接",
            trigger: "blur",
            min: 2,
            max: 50,
          },
        ],
        kfnc: [
          {
            required: true,
            message: "请输入客服昵称",
            trigger: "blur",
            min: 1,
            max: 10,
          },
        ],
        kfrx: [
          {
            required: true,
            message: "请输入客服热线",
            trigger: "blur",
            min: 1,
            max: 11,
          },
        ],
        gywm: [
          {
            required: true,
            message: "请输入配置小程序关于我们",
            trigger: "blur",
            min: 100,
            max: 3000,
          },
        ],
        bzzx: [
          {
            required: true,
            message: "请输入配置小程序帮助中心",
            trigger: "blur",
            min: 100,
            max: 3000,
          },
        ],
        wxewm: [
          {
            required: true,
            message: "请上传客服微信二维码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {},
  setup() {},
  methods: {
    async saveFn() {
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }
      let data = this.formData;
      otherSet(data).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "保存成功",
          });
        }
      });
    },
    getImg(url) {
      this.formData.wxewm = url;
    },
    getData() {
      otherSetShow().then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
          this.showCont = true;
        }
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>其他设置</div>
        </div>
        <div class="formMain">
          <el-form :rules="rules" ref="ruleForm" :model="formData">
            <div class="flexCont">
              <el-form-item label="企业名称" label-width="120" prop="qymc">
                <el-input
                  placeholder="请输入企业名称"
                  v-model="formData.qymc"
                  maxlength="20"
                />
              </el-form-item>
              <el-form-item label="企业地址" label-width="120" prop="qydz">
                <el-input
                  placeholder="请输入企业地址"
                  v-model="formData.qydz"
                />
              </el-form-item>
              <el-form-item label="客服昵称" label-width="120" prop="kfnc">
                <el-input
                  placeholder="请输入客服昵称"
                  v-model="formData.kfnc"
                />
              </el-form-item>
              <el-form-item label="客服热线" label-width="120" prop="kfrx">
                <el-input
                  placeholder="请输入客服热线"
                  v-model="formData.kfrx"
                />
              </el-form-item>
              <el-form-item label="注册申请联系" label-width="120" prop="kfrx">
                <el-input
                  placeholder="请输入注册申请联系"
                  v-model="formData.kfrx"
                />
              </el-form-item>
              <el-form-item
                label="客服企业微信"
                label-width="120"
                prop="qywx_url"
              >
                <el-input
                  placeholder="请输入客服企业微信链接"
                  v-model="formData.qywx_url"
                />
              </el-form-item>
              <el-form-item
                class="flexPull"
                label="关于我们"
                label-width="120"
                prop="gywm"
              >
                <el-input
                  v-model="formData.gywm"
                  maxlength="3000"
                  placeholder="请输入关于我们"
                  show-word-limit
                  :rows="4"
                  type="textarea"
                />
              </el-form-item>
              <el-form-item
                class="flexPull"
                label="帮助中心"
                label-width="120"
                prop="bzzx"
              >
                <el-input
                  v-model="formData.bzzx"
                  maxlength="3000"
                  placeholder="请输入帮助中心"
                  show-word-limit
                  :rows="4"
                  type="textarea"
                />
              </el-form-item>
              <el-form-item
                class="flexPull"
                label="微信二维码"
                v-if="showCont"
                label-width="120"
                prop="wxewm"
              >
                <defUpImg :propImg="formData.wxewm" @ok="getImg"></defUpImg>
              </el-form-item>
              <el-form-item class="flexPull" label=" " label-width="120">
                <btn value="保存设置" @ok="saveFn"></btn>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
